<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <style>
        #getCode {
            display: inline-block;
            width: 80px;
            height: 25px;
            background-color: gray;
        }
    </style>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <h1>登录</h1>
    <form action="##">
        <label>
            账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号: <input type="text" placeholder="请输入账号" id="username"><span
                id="usernamespan"></span>
        </label><br>
        <label>
            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码: <input type="password" placeholder="请输入密码" id="password"><span
                id="passwordspan"></span>
        </label><br>
        <label>
            验证码：<input type="text" placeholder="请输入验证码" id="code">
            <span id="getCode">1233</span>
        </label><br>
        <input type="submit" value="登录">
    </form>
    <script>
      
         //打开页面就想服务器要验证码
         window.onload = function () {
            //直接发送ajax请求
            axios({
                method: "get",
                url: "http://localhost:8080/checkcode",
            })
                .then(res => {
                    if (res.data.code == 200)
                        //使用localStorage存储验证码
                        localStorage.setItem("code", res.data.msg)
                    document.getElementById("getCode").innerHTML = res.data.msg
                })
        }

        const form = document.querySelector("form")
        const username = document.querySelector("#username")
        const password = document.querySelector("#password")
        const usernamespan = document.querySelector("#usernamespan")
        const passwordspan = document.querySelector("#passwordspan")
        let userFlag = false;
        let passFlag = false;

        //账号
        username.oninput = function () {
            //当账号的长度在4~16之间的数字,字母,下划线
            const reg = /^\w{4,16}$/g
            if (reg.test(this.value.trim())) {
                usernamespan.innerHTML = "账号符合要求"
                usernamespan.style.color = "green"
                userFlag = true;
            } else {
                usernamespan.innerHTML = "账号的长度在4~16位之间"
                usernamespan.style.color = "red"
                userFlag = false;
            }
        }
        //密码
        password.oninput = function () {
            //当账号的长度在4~16之间的数字,字母,下划线
            const reg = /^\w{4,16}$/g
            if (reg.test(this.value.trim())) {
                passwordspan.innerHTML = "密码符合要求"
                passwordspan.style.color = "green"
                passFlag = true;
            } else {
                passwordspan.innerHTML = "密码的长度在4~16位之间"
                passwordspan.style.color = "red"
                passFlag = false;
            }
        }

        form.onsubmit = function(e){
            //阻止表单提交
            e.preventDefault();
            //获取用户输入的账号喝密码
            const username = document.getElementById("username").value.trim()
            const password = document.getElementById("password").value.trim();
            console.log(username,password);
            //校验账号密码
            if (!(userFlag && passFlag)) return alert("账号密码不正确")
            //校验验证码
            const code1 = localStorage.getItem("code")
            const code2 = document.getElementById("code").value.trim();
            if (code1 != code2) return alert("验证码错误")
            axios({
                method:"post",
                    url:"http://localhost:8080/login",
                    data:{
                        username,
                        password
                    }
            })
            .then(res=>{
                    if(res.data.code == 200){
                        //sessionStorage => 会话存储
                        sessionStorage.setItem("token",res.data.token)
                        alert(res.data.msg)
                        //跳转到主页
                        location.href = "./home.html"
                    }else{
                        alert(res.data.msg)
                        //刷新
                        location.reload();
                    }
                })
        }

       

    </script>
</body>

</html>